<template>
  <div class='gift-tips-wrap'>
    <!-- 赠送礼物用户的头像 -->
     <div class='gift-tips-avatar'>
      <img :src='giftMessageArr[0] && giftMessageArr[0].giftSendUserTx'/>
    </div> 
   <div class='gift-user-info'>
      <div class='gift-user-nikename'>{{giftMessageArr[0] && giftMessageArr[0].giftSendUserNickName}}</div>
      <div class='gift-send-info'>送出<span class='send-gift-name'>{{giftMessageArr[0] && giftMessageArr[0].giftSendName}}</span></div>
    </div>
    <div class='send-gift-icon'>
      <img :src='giftMessageArr[0] && giftMessageArr[0].giftSendIcon'/>
    </div>
    <div class='gift-amount-link'></div> 
    <!-- 赠送礼物的数量 -->
    <div class='gift-send-amount'>
      {{giftMessageArr[0] && giftMessageArr[0].giftSendAmount}}
    </div>
  </div>
</template>
<script>
import webim from "../../util/imSdk";
import baseIm from "../../util/imBase";
import fun from "../../util/function";
export default {
  components: {
  },
  data() {
    return {
    }
  },
  computed: {
     giftMessageArr(){
       return this.$store.state.giftMessageQueue
     },
  },
  created () {
  },
};
</script>
<style scoped>
.gift-tips-wrap{
  /* width: 360px; */
  height: 70px;
  padding-right: 96px;
  background: linear-gradient(90deg, #FE4D4E, #FF2D8F);
  border-radius: 35px;
	position: fixed;
	top: 600px;
  left: -520px;
	z-index: 1002;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	opacity: 1;
  transition: all 1s ease-in-out;
}

.gift-tips-avatar{
	display: inline-block;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	overflow: hidden;
}

.gift-tips-avatar img{
	width: 70px;
	height: 70px;
	border-radius: 50%;
}

.gift-user-info{
	/* width: 182px; */
	height: 100%;
  align-self: center;
	color:#fff;
	margin-left: 4px;
  padding-right: 10px;
}

.gift-user-nikename{
	width: 100%;
  font-size: 26px;
	line-height: 38px;
}

.gift-send-info{
  font-size: 20px;
	line-height: 30px;
}

.send-gift-name{
	margin-left: 20px;
}

.send-gift-icon{
  position: absolute;
  top: -15px;
  right: 4px;
	width: 96px;
	height: 92px;
}

.send-gift-icon img {
  width: 96px;
	height: 92px;
}

.gift-amount-link{
	position: absolute;
  right: -50px;
	bottom: 20px;
	width: 38px;
	height: 33px;
	background-image: url(../../assets/images/gift-icon.png);
	background-size: 100% 100%;
}

.gift-send-amount{
  position: absolute;
  right: -100px;
	bottom: 10px;
  font-size: 70px;
  background: linear-gradient(0deg, #FD4D4D 0%, #FF2D8F 100%);
  -webkit-background-clip: text;/* 使用透明颜色填充文本 */ 
  -webkit-text-fill-color: transparent; /* 用渐变背景作为颜色填充文本 */
}
</style>